import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import type { IFlowListArgs, IFlowInfo } from '@/models/matl';
import { defaultSearchConfig } from '@/defaultColConfig';
import { getFlowList, getMaterialTypeOptions } from '@/services/matl';
import { buildMaterialTypeMap } from '@/utils/mapUtil';
import moment from 'moment';

export default () => {

  const [materialTypeMap, setMaterialTypeMap] = useState<Map<string, string>>();

  useEffect(() => {
    getMaterialTypeOptions()
    .then(res => {
      const map = buildMaterialTypeMap(res.data);
      setMaterialTypeMap(map);
    });
;
  }, []);

  const columns: ProColumns<IFlowInfo>[] = [
    {
      title: 'flowId',
      dataIndex: 'flowId',
      search: false,
    },
    {
      title: '时间',
      dataIndex: 'ctime',
      render: (record) => <span>{moment(record.ctime).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '料号',
      dataIndex: 'materialCode',

    },
    {
      title: '描述',
      dataIndex: 'description',
      search: false,
    },
    {
      title: '物料类型',
      dataIndex: 'materialType',
      valueEnum: materialTypeMap,
      initialValue: '',
    },
    {
      title: '批号',
      dataIndex: 'batch',
    },
    {
      title: '库存状态',
      dataIndex: 'stockStatus',
    },

    {
      title: '业务类型',
      dataIndex: 'bizType',
    },
    {
      title: '方向',
      dataIndex: 'direction',
      search: false,
    },
    {
      title: '托盘号',
      dataIndex: 'palletCode',
    },

    {
      title: '单据',
      dataIndex: 'orderCode',
    },
    {
      title: '业务单号',
      dataIndex: 'bizOrder',
      hideInTable: true,
      search: false,
    },
    {
      title: '操作类型',
      dataIndex: 'operationType',
      hideInTable: true,
      search: false,
    },
    {
      title: '数量',
      dataIndex: 'quantity',
      search: false,
    },
    {
      title: '计量单位',
      dataIndex: 'uom',
      search: false,
    },

    {
      title: '用户',
      dataIndex: 'cuser',
      search: false,
    },

    {
      title: '备注',
      dataIndex: 'comment',
      search: false,
    },
  ];


  return (
    <PageContainer>
      <ProTable<IFlowInfo, IFlowListArgs>
        headerTitle="流水列表"
        rowKey="flowId"
        search={defaultSearchConfig}
        toolBarRender={() => []}
        request={getFlowList}
        columns={columns}
      />


    </PageContainer>
  );
};
